<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>json应用--动态表格数据</title>
</head>
<body>
    <h1>用户信息管理</h1>
    <table>
        <thead>
            <tr>

                <td>用户名</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>操作</td>
                

            </tr>
        </thead>

        <tbody id="tbody">

        </tbody>

    </table>
    <p></p>
    <h3>新增用户</h3>
    <br> 用户名：<input type="text" id="txtUserName">
    <br> 姓&nbsp;&nbsp;&nbsp;名：<input type="text" id="txtRealName">
    <br> 性&nbsp;&nbsp;&nbsp;别：<input type="radio" name="gender" checked> 男
                                <input type="radio" name="gender" > 女
    <br> 年&nbsp;&nbsp;&nbsp;龄：<input type="text"  name ="gender" id="txtAgeName" > 
    <br> <input type="button" value="保存" onclick="add()">

</body>
</html>


<script>
//定义存放所有用户数据的数组user List
    var userList=[
    {"username":"admin","realname":"李大哥",
         "gender":"男","age":18},
    {"username":"lihaiyang","realname":"李海洋",
        "gender":"男","age":18}
    ];

// 定义加载数组userList数据到表格中的方法
function loadData(){

    var tbody=document.getElementById("tbody");
    tbody.innerHTML="";//清空表格中上次的内容
    // 变例userList数组中的元素，动态想表格中的tbody中增加行<tr>
        for(var i=0; i<userList.length;i++){
            var user=userList[i];
            tbody.innerHTML+="<tr>"+"<td>"+user.username+"</td>"
                           +"<td>"+user.realname+"</td>"
                           +"<td>"+user.gender+"</td>"
                           +"<td>"+user.age+"</td>"
                           +"<td>"+"<input type=\"button\"   value=\"删除\" onclick=\"del("+i+")\" >"+"</td>"
                           +"</tr>";
        }//End for
        
}

//页面加载的时候，执行loadData  
loadData();

// 定义将录入的用户信息增加到表格中的方法
function add(){
    
    // 1.获得输入的内容值
    var username=document.getElementById("txtUserName").value;
    var realname=document.getElementById("txtRealName").value;
    var gender="";// gender值的获得
    var age=document.getElementById("txtAgeName").value;
  

    // 2.根据输入的内通知，新创建一个用户对象，加入到数组userList中
    var user={"username":username,"realname":realname,"gender":gender,"age":age};
    userList.push(user);
    loadData();
}

// 定义删除某个用户的方法
function del(i){
    // 确认删除 confirm()弹出提示
    if(confirm("是否确定删除？")){
        // 从数组userList中，移除第i个位置的元素
        userList.splice(i,i);
        loadData();
    }



}
  
</script>